<template>
  <div class="sidebar">
    <el-menu
      default-active="/station-list"
      class="sidebar-menu"
      :router="true"
      :collapse="isCollapse"
    >
      <el-menu-item index="/">
        <el-icon><HomeFilled /></el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="/station-list">
        <el-icon><Monitor /></el-icon>
        <span>站点列表</span>
      </el-menu-item>
      <el-menu-item index="/analysis">
        <el-icon><DataLine /></el-icon>
        <span>数据分析</span>
      </el-menu-item>
      <el-menu-item index="/management">
        <el-icon><Management /></el-icon>
        <span>个人中心</span>
      </el-menu-item>
      <el-menu-item index="/settings">
        <el-icon><Setting /></el-icon>
        <span>设置中心</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HomeFilled, Monitor, DataLine, Management, Setting } from '@element-plus/icons-vue'

const isCollapse = ref(false)
</script>

<style scoped>
.sidebar {
  height: 100%;
}

.sidebar-menu {
  height: 100%;
  border-right: none;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 200px;
}
</style>